<template>
	<div class="preson">
		<div class="persontop">
			<div class="allperson">
				<div class="personLest">icon</div>
				<div class="personRight">
					<div class="right-top">
						<span class="edit">编辑</span>
						<span class="approve">认证</span>
					</div>
					<div class="right-bottom">
						<div>完成度8:</div>
						<div class="doneinfor">
							<span></span>
							<span></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		}
	}
</script>

<style scoped>
	.preson{
		width: 100%;
		height: 100%;
		background: #F5F2F0;
	}
	.persontop{
		width: 100%;
		height: 111px;
		background: #fff;
		padding-bottom:10px;
	}
	.allperson{
		width: 90%;
		height: 100%;
		margin: auto;
	}
	.personLest{
		width: 140px;
		height: 90px;
		border-radius: 10px;
		background: #333;
		text-align: center;
		line-height: 90px;
		font-size: 14px;
		color:#fff;
		float: left;
		margin-top: 20px;
	}
	.personRight{
		width: 165px;
		height: 90px;
		float: right;
		margin-top: 20px;
	}
	.personRight span{
		display: inline-block;
	}
	.edit,.approve{
		width: 70px;
		height: 30px;
		border-radius: 5px;
		background:#1177dc;
		color:#fff;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
	}
	.approve{
		background:#ff6600;
		margin-left: 15px;
	}
	.doneinfor span:nth-child(1){
		width: 118px;
		height: 14px;
		background: #333333;
	}
	.doneinfor span:nth-child(2){
		width: 42px;
		height: 12px;
		border:1px solid #333333;
	}
	.right-bottom{
		margin-top: 20px;
	}
	
</style>
